<template>
    <div>
        <!-- 新增按钮 -->
        <el-button type="primary" @click="showAddDialog('add')" style="margin-bottom: 20px;float:right">新增用户</el-button>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="age" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="token" label="地址"></el-table-column>

            <el-table-column label="操作" width="200" class-name="action-column">

                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="mini" type="primary" @click="showAddDialog('edit', scope.row)">
                            修改
                        </el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                    </el-button-group>

                </template>

            </el-table-column>



        </el-table>

        <!-- <el-pagination background layout="prev, pager, next, jumper, sizes, total" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination> -->
        <!-- 替换原来的el-pagination -->
        <PageInfo :current-page="pageNum" :page-size="pageSize" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />



        <!-- 新增用户对话框 -->
        <el-dialog :title="doTile" :visible.sync="dialogVisible" width="30%">
            <el-form :model="addForm" :rules="rules" ref="addForm" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="addForm.age"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="token">
                    <el-input v-model="addForm.token"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">
                    {{ type === 'add' ? '新增' : '修改' }}
                </el-button>
            </span>
        </el-dialog>



    </div>
</template>

<script>

import PageInfo from "../common/PageInfo.vue";

import {
    fetchData,
    handleSizeChange,
    handleCurrentChange,
    showAddDialog,
    submitAddForm,
    submitUpdateForm,
    handleSubmit,
    handleDelete
} from "@/api/Table.js";

export default {
    components: { PageInfo },
    data() {
        return {
            tableData: [],
            loading: false,
            pageNum: 1,
            pageSize: 10,
            total: 0
            , dialogVisible: false, // 控制对话框显示
            dialogVisible1: false,
            doTile: "新增用户",
            type: 'add',
            addForm: { // 新增表单数据
                name: '',
                age: '',
                token: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
                token: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ]


            }
        }
    },

    methods: {
        fetchData,
        handleSizeChange,
        handleCurrentChange,
        showAddDialog,
        submitAddForm,
        submitUpdateForm,
        handleSubmit,
        handleDelete
    },
    mounted() {
        console.log('students加载完毕')
        this.fetchData();
    }
}
</script>


<style scoped>
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* 如果需要更紧凑的按钮样式 */
.action-buttons .el-button {
    padding: 5px 8px;
    min-width: 50px;
}
</style>